import { useEffect, useState } from "react"
import ColumnComponent from "../../../../components/ColumnComponent"
import { WidgetConfig } from "../../../../types/FormInterface"
import { Card, Col, Row, Statistic, StatisticProps } from "antd"
import CountUp from "react-countup";
import Mock from "../../../../mock/logsMock";
import axios from "axios";


function loginLogs() {
    Mock()
    const [data, setData] = useState([])
    const formatter: StatisticProps['formatter'] = (value) => (
        <CountUp end={value as number} separator="," />
    );
    const column: WidgetConfig[] = [
        {
            title: '登录时间',
            key: "loginTime",
            dataIndex: "loginTime",
            type: ""
        },
        {
            title: '登录用户',
            key: "loginMement",
            dataIndex: "loginMement",
            type: ""
        },
        {
            title: '登录IP',
            key: "loginIP",
            dataIndex: "loginIP",
            type: ""
        },
    ]
    let statisticData: any[] = [
        {
            title: '在线人数',
            value: 12456
        },
        {
            title: '昨天人数',
            value: 100
        },
        {
            title: '今日人数',
            value: 123526
        },
        {
            title: '累计人数',
            value: 8989641
        },
    ]
    useEffect(() => {
        // 初始化数据
        const url = '/api/logs';
        axios.post(url, {}).then(res => {
            setData(res.data);
            console.log(data)
        }).catch(error => console.log(error))
    }, [])

    return (
        <>
            <Row gutter={16} style={{}} key={'row'}>
                {
                    statisticData.map((item, index) => {
                        return (
                            <Col span={6} key={index}>
                                <Card bordered={false}>
                                    <Statistic title={item.title} value={item.value} precision={2} formatter={formatter} />
                                </Card>
                            </Col>
                        )
                    })
                }
            </Row>
            <ColumnComponent column={column} data={data} ></ColumnComponent>
        </>
    )
}

export default loginLogs

